import React, {Component} from 'react';
import ListHeader from "../../Components/ListHeader";
import Base from "../../Components/Base";
import BaseList from "../../Components/BaseList";
import {MoreOutlined,PlusOutlined,HeartOutlined,MessageOutlined} from '@ant-design/icons';
import './index.css';
import Bar from "../../Components/Bar";

class SongList extends Component {
    state = {
        tabs:[
            {title:'评论',icon:<MessageOutlined />},
            {title:'点赞',icon:<HeartOutlined />},
            {title:'收藏',icon:<PlusOutlined />},
            {title:'更多',icon:<MoreOutlined />},
        ],
        listInfo:{},
        listArr:[],
    }
    componentDidMount() {
        this.getData();
    };
    getData = ()=>{
        const {id} = this.props.location.state;
        this.$api.getSongList(id).then(data=>{
            console.log('@',data.privileges)
            console.log('@@',data.playlist);
            let info = {
                img: data.playlist.coverImgUrl,
                name: data.playlist.name,
                count: data.playlist.subscribedCount,
                creator: {
                    nickname: data.playlist.creator.nickname,
                    avatar:data.playlist.creator.avatarUrl,
                }
            };
            this.setState({listInfo:info,listArr:data.playlist.tracks});
        })

    }
    render() {
        const {listInfo,tabs,listArr} = this.state;
        return (
                <div className={'songlist_page'}>
                    <ListHeader title={'歌单'} {...this.props}></ListHeader>
                    {listInfo.img?<div className="head">
                        <img src={listInfo.img} className={'head_img'} />
                        <div className="top">
                            <div className="left">
                                <Base img={listInfo.img} rt={{lefticon:'icon-zhuanji',title:listInfo.count}}></Base>
                            </div>
                            <div className="right">
                                <div className={'title'}>{listInfo.name}</div>
                                <div className="user">
                                    <div className={'img_wrapper'}>
                                        {listInfo.creator ? <img src={listInfo.creator.avatar}/> :null}
                                    </div>
                                    {listInfo.creator ? <div className={'title'}>{listInfo.creator.nickname}</div> : null}
                                </div>
                            </div>
                        </div>
                        <div className="bottom">
                            <Bar tabs={tabs}></Bar>
                        </div>
                    </div>:null}
                    {listArr.length>0? <main>
                        <div className="list">
                            <BaseList list={listArr}></BaseList>
                        </div>
                    </main>:null}
                </div>
        );
    }
}

export default SongList;